<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>神乐</title>
    <link href="css/shenle.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="head_div">
    <img src="images/baidu.png" alt="">
    <ul>
        <li><a href="#">导航链接一</a></li>
        <li><a href="#img1">导航链接二</a></li>
        <li><a href="#table1">导航链接三</a></li>
        <li><a href="#form1">导航链接四</a></li>
    </ul>
</div>

<div id="first_div">
    <h2>文章一级标题</h2>
    <h2 class="two">文章二级标题</h2>
    <p>
        <span>文章作者</span>
        <span>文章发表时间</span>
    </p>
    <p>
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，<br />
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，<br />
        这是我最喜欢的神乐，这是我最喜欢的神乐，
        <a href="https://baike.baidu.com/item/%E7%A5%9E%E4%B9%90/20188647?fr=aladdin" target="_blank">
            这是一个链接到介绍神乐的网页
        </a>
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，<b>这里有一个粗体——这是我最喜欢的神乐</b>，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐.<br />
        <img src="images/神乐438×300.png" alt=""><br />
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，<br />
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，<br />
        这是我最喜欢的神乐，这是我最喜欢的神乐，
        <a href="https://baike.baidu.com/item/%E7%A5%9E%E4%B9%90/20188647?fr=aladdin" target="_blank">
            这是一个链接到介绍神乐的网页
        </a>
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，<b>这里有一个粗体——这是我最喜欢的神乐</b>，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐.
    </p>
</div>

<div id="second_div">
    <h2>另一篇文章一级标题</h2>
    <h2 class="two">文章二级标题</h2>
    <p>
        <span>文章作者</span>
        <span>文章发表时间</span>
    </p>
    <p>
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，<br />
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，<br />
        这是我最喜欢的神乐，这是我最喜欢的神乐，
        <a href="http://www.19yxw.com/Article/2016-9-6/333416.html" target="_blank">
            这是一个链接到介绍神乐技能的网页
        </a>
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，<b>这里有一个粗体——这是我最喜欢的神乐</b>，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，
        这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐，这是我最喜欢的神乐.<br />
        <img src="images/神乐400×300.png" alt=""><br />
        <div>
            <ul>
                <li>列表项目一</li>
                <li>列表项目二</li>
                <li>列表项目三</li>
            </ul>
        </div>
    </p>
</div>

<div id="picture_div">
    <h2>图片</h2>
    <figure id="img1">
        <figcaption>神乐的图片</figcaption>
        <img src="images/神乐400×300.png" alt="">
    </figure>
    <figure>
        <figcaption>神乐的图片</figcaption>
        <img src="images/神乐400×300_01.png" alt="">
    </figure>
    <figure>
        <figcaption>神乐的图片</figcaption>
        <img src="images/神乐438×300.png" alt="">
    </figure>
    <figure>
        <figcaption>神乐的图片</figcaption>
        <img src="images/神乐400×300_02.png">
    </figure>
</div>

<div id="last_div">
    <h2>最后一篇文章一级标题</h2>
    <h2 class="two">文章二级标题</h2>
    <p>
        <span>文章作者</span>
        <span>文章发表时间</span>
    </p>
    <ol>
        <li>排名1</li>
        <li>排名2</li>
        <li>排名3</li>
    </ol>
    <div>
        <p>下面是一个表格，为了使表格更好看，添加了语句——border="1": </p>
        <table border="1" id="table1">
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
            <tr>
                <td>表格内容单元</td>
                <td>表格内容单元</td>
                <td><a href="table">操作</a></td>
            </tr>
            <tr>
                <td>表格内容单元</td>
                <td>表格内容单元</td>
                <td><a href="table">操作</a></td>
            </tr>
            <tr>
                <td>表格内容单元</td>
                <td>表格内容单元</td>
                <td><a href="table">操作</a></td>
            </tr>
            <tr>
                <td>表格内容单元</td>
                <td>表格内容单元</td>
                <td><a href="table">操作</a></td>
            </tr>
            <tr class="font_weight">
                <td>总计</td>
                <td colspan="2">1000</td>
            </tr>
        </table>
    </div>
</div>

<div id="side_div">
    <div id="side_title_div">
        <h2>这里以后是一个侧栏，这是侧栏标题</h2>
    </div>
    <form action="" method="post">
        <div>
            <label for="side_mail_div" class="title">请输入邮件地址：</label>
            <input type="email" name="e-mail_address" value="这是一个文本输入框" id="side_mail_div" /><br />
            <span class="title_tips">邮箱地址请按要求格式输入</span>
        </div>
        <div>
            <label for="side_password_div1" class="title">请输入密码：</label>
            <input type="password" name="password" id="side_password_div1" minlength="6" maxlength="16" value="" />
        </div>
        <div>
            <label for="side_password_div2" class="title">请再一次输入密码：</label>
            <input type="password" name="password" id="side_password_div2" minlength="6" maxlength="16" value="" />
        </div>
        <span class="title_tips">密码为6-16位字母或数字</span>
        <div id="side_sex_div">
            <span class="title">性别：</span>
            <input type="radio" name="gender" id="male" value="man" checked="checked"/>
            <label for="male">男</label>
            <input type="radio" name="gender" id="female" value="woman" />
            <label for="female">女</label>
        </div>
        <div id="side_city_div">
             <label class="title">城市：</label>
             <select name="city" size="1">
                 <option value="Beijing">北京</option>
                 <option value="Guangdong">广东</option>
                 <option value="Chongqing">重庆</option>
                 <option value=" "></option>
                 <option value=" "></option>
                 <option value=" "></option>
                 <option value=" "></option>
             </select>
        </div>
        <div id="side_hobbies_div">
            <span class="title">爱好：</span>
            <input type="checkbox" id="sports" name="hobbit" value="sports" checked="checked" />
            <label for="sports">运动</label>
            <input type="checkbox" id="arts" name="hobbits" value="arts" />
            <label for="arts">艺术</label>
            <input type="checkbox" id="science" name="hobbit" value="science" />
            <label for="science">科学</label>
        </div>
        <div id="side_description_div">
            <label class="title">个人描述：</label>
            <textarea name="description" rows="3">这是一个多行文本框，请输入您的个人描述</textarea>
        </div>
        <div id="side_submit_div">
            <input type="submit" name="subscribe" value="确认提交" />
        </div>
    </form>
</div>

<div id="copy_div">
    <p>版权所有&copy;</p>
</div>

</body>
</html>


